<template>
  <view class="wash-end">
    <view class="top">
      <u-icon
        name="checkmark-circle-fill"
        color="#36C364"
        size="52rpx"
      ></u-icon>
      <text>极速洗车完成</text>
    </view>
    <!-- <view class="fault-report" @click="show = true">
      <i-icon icon="iconjubao" size="34rpx" color="#333333"></i-icon>
      <text class="text">故障上报</text>
    </view> -->
    <view class="img-box">
      <image src="@/static/img/autoWash.png" mode="scaleToFill" class="img" />
    </view>
    <view class="progress">
      <!-- <u-line-progress
        :striped="true"
        percent="100"
        :striped-active="true"
        active-color="#36C364"
        :show-percent="false"
      >
      </u-line-progress> -->
      <view class="line-progress">
        <view class="line-progress-active"></view>
        <view class="dot">
          <view class="text">100%</view>
        </view>
      </view>
    </view>
    <view class="time-box">
      <view class="text">累计洗车{{ totalNumber }}次</view>
      <view class="text">本月洗车{{ monthNumber }}次</view>
      <view class="text">
        <text>会员剩余</text>
        <text class="bold">{{ card }}</text>
        <text>天</text>
      </view>
    </view>
    <view class="section">
      <view class="title"><text>您对7迈车洗车还满意吗？</text></view>
      <view class="radio-box">
        <view
          class="item"
          v-for="(item, index) in radioList"
          :key="index"
          @click="onClickRadio(index)"
        >
          <view class="radio" :class="{ active: item.selected }">
            <u-icon
              name="checkmark"
              color="#fff"
              size="26"
              v-if="item.selected"
            ></u-icon>
          </view>
          <text class="text">{{ item.title }}</text>
        </view>
      </view>
      <view class="content">
        <view class="text-area">
          <u-input
            v-model="value"
            type="textarea"
            placeholder="哪些地方不够好，我们尽快完善！"
            height="90"
            :auto-height="false"
            :clearable="false"
            maxlength="140"
          />
        </view>
        <view class="num"
          ><text>{{ value.length }}/140</text></view
        >
      </view>
    </view>
    <view
      class="submit"
      :class="{ disabled: value.length < 1 }"
      @click="onSubmitSatisfaction"
      ><text>提交</text></view
    >

    <u-popup
      mode="bottom"
      v-model="show"
      border-radius="30"
      :zoom="false"
      :safe-area-inset-bottom="true"
      :mask-close-able="false"
      :closeable="false"
      z-index="999"
    >
      <fault :order-id="orderId" @onClose="onClose" />
    </u-popup>
  </view>
</template>

<script>
import fault from "../components/fault.vue";
export default {
  components: {
    fault,
  },
  data() {
    return {
      radioList: [
        { selected: true, title: "满意", id: 1 },
        { selected: false, title: "一般般", id: 2 },
        { selected: false, title: "不满意", id: 3 },
      ],
      value: "",
      show: false,
      totalNumber: 0, // 累计洗车次数
      monthNumber: 0, // 本月累计洗车次数
      totalTime: "", // 总用时
      card: 0, // 会员剩余
      cardUnit: "", // 会员剩余单位
      machineId: "", // 机器id
      orderId: "", // 订单id
    };
  },
  onLoad(options) {
    let surplus = options.card ? decodeURIComponent(options.card) : "";
    surplus = surplus.split("-");
    if (surplus.length > 1) {
      this.card = surplus[0];
      this.cardUnit = surplus[1];
    }
    this.machineId = options.machineId || "";
    this.orderId = options.orderId || "";
    if (options.time) {
      let time = this.$commen.countDown(Number(options.time));
      this.totalTime = `${time[1]}分钟${time[2]}秒`;
    }
  },
  methods: {
    onClickRadio(data) {
      this.radioList.map((item, index) => {
        item.selected = data === index;
      });
      this.radioList = this.radioList;
    },
    onClose() {
      this.show = false;
    },
    onSubmitSatisfaction() {
      let self = this;
      if (this.value.length < 1) {
        return false;
      }
      let evaluate = this.radioList.filter((item) => {
        return item.selected;
      });
      evaluate = evaluate[0];
      uni.showModal({
        title: "温馨提示",
        content: "是否确定提交？",
        confirmText: "是",
        cancelText: "否",
        confirmColor: "#FBB000",
        success: async (res) => {
          if (res.confirm) {
            try {
              uni.showLoading({
                title: "提交中",
                mask: true,
              });
              let result = await this.$api.selfServiceCarWash.AddSatisfaction({
                self_Service_Car_Wash_Order_Id: self.orderId,
                choice_ID: evaluate.id,
                choice_Description: evaluate.title,
                suggestion: self.value,
              });
              uni.hideLoading();
              if (result.code === 200) {
                uni.showToast({
                  icon: "none",
                  title: "感谢您提交的意见，我们将尽快完善",
                  success() {
                    setTimeout(() => {
                      uni.navigateBack({
                        delta: 1,
                      });
                    }, 2000);
                  },
                });
              } else {
                uni.showToast({
                  icon: "none",
                  title: "小7脑子瓦特了，麻烦重新提交呐！",
                });
              }
            } catch (e) {
              //TODO handle the exception
              uni.hideLoading();
              uni.showToast({
                icon: "none",
                title: "小7脑子瓦特了，麻烦重新提交呐！",
              });
            }
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
@keyframes progress-stripes {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 30rpx 0;
  }
}

.wash-end {
  height: 100%;
  overflow: hidden;
  .top {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120rpx;
    font-size: 44rpx;
    font-weight: bold;
    color: #333333;
    margin-top: 18rpx;
    .icon {
      width: 80rpx;
      height: 80rpx;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
    }
  }
  .fault-report {
    position: absolute;
    right: 0;
    top: 60rpx;
    width: 170rpx;
    height: 56rpx;
    background-color: #ffe23e;
    border-radius: 28rpx 0 0 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .text {
      font-size: 22rpx;
      color: #333;
      margin-left: 10rpx;
    }
  }
  .time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .text {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      color: #333;
      height: 50rpx;

      .bold {
        font-size: 36rpx;
        color: #ff4b44;
        font-weight: bold;
        margin: 0 15rpx;
      }
    }
  }
  .img-box {
    text-align: center;
    .img {
      width: 400rpx;
      height: 200rpx;
    }
  }

  .section {
    width: 600rpx;
    height: 650rpx;
    border-radius: 20rpx;
    margin: 26rpx auto 0;
    padding: 50rpx;
    border: 2rpx solid #999999;
    border-radius: 20rpx;
    .title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
    .radio-box {
      margin-top: 30rpx;
      .item {
        height: 70rpx;
        display: flex;
        align-items: center;
        .radio {
          width: 40rpx;
          height: 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 40rpx;
          border: 2px solid #666;
          &.active {
            background-color: #666;
            border: none;
          }
        }
        .text {
          margin-left: 20rpx;
          font-size: 28rpx;
          color: #333;
        }
      }
    }
    .content {
      width: 500rpx;
      height: 260rpx;
      background-color: #fff;
      border-radius: 10rpx;
      margin-top: 20rpx;
      overflow: hidden;
      background: #f6f6f6;
      border-radius: 10rpx;

      .text-area {
        margin: 20rpx 20rpx 0;
        overflow: hidden;
        height: 200rpx;
      }
      .num {
        font-size: 22rpx;
        color: #999;
        text-align: right;
        padding: 0 20rpx;
      }
    }
  }
  .submit {
    width: 600rpx;
    height: 88rpx;
    background: #4a4c59;
    border-radius: 44rpx;
    margin: 27rpx auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #fff;
    &.disabled {
      opacity: 0.4;
    }
  }
}
.progress {
  margin: 27rpx 75rpx 37rpx;

  .line-progress {
    width: 100%;
    height: 32rpx;
    border-radius: 16rpx;
    background-color: #36c364;
    position: relative;

    .line-progress-active {
      border: 4rpx solid #51c069;
      width: 100%;
      border-radius: 16rpx;
      height: 32rpx;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #36c364;
      background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 1) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 1) 75%,
        transparent 75%,
        transparent
      );
      background-size: 30rpx 30rpx;
      animation: progress-stripes 2s linear infinite;
    }
    .dot {
      position: absolute;
      right: -32rpx;
      top: -16rpx;
      width: 64rpx;
      height: 64rpx;
      line-height: 64rpx;
      background: #ffffff;
      border: 4rpx solid #51c069;
      box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.24);
      border-radius: 50%;
      font-size: 20rpx;
      font-weight: 500;
      color: #1d9036;
      margin-left: -29rpx;

      .text {
        transform: scale(0.8);
        margin-left: -4rpx;
      }
    }
  }
}
</style>
